<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@include file="include/base.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title></title>
	<link rel="shortcut icon" href="../img/favicon.ico" >
	<link rel="stylesheet" href="../css/bootstrap.min.css">
	<link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
	 <link rel="stylesheet" href="../css/demos.css" type="text/css" />
	<link rel="stylesheet" href="../css/index.css" />
	<style type="text/css" >
		.myactive{
           background-color:#FBF9E2;
           color:#5476A4;
		}
	</style>
</head>
<body>
	
	<!--top-->
	<%@ include file="include/topcenter.jsp" %>
	
	<!--contain-->
	<div class="contain">
		<%@ include file="include/logocenter.jsp" %>
		
		<div class="middle">
			<div class="middle_left">
				
				<a href="gopic.jspx" class="link2 myactive" >
					<span class="link2span1">修改头像</span><br/>
				</a>
				
				<a href="altermes.jspx" class="link2" >
					<span class="link2span1">修改资料</span><br/>
				</a>
				<a href="userexit.jspx" class="link2" >
					<span class="link2span1">退出系统</span><br/>
				</a>
			</div>
			
			<!--right-->
			
			<div class="middle_right">
				<%@ include file="include/pic.jsp" %>
				
	            
				  		<div>
					<h4 style="font-size:20px;margin-top:20px;"><i class=" icon-pencil" style="margin-top:5px;"></i>修改头像</h4>
					<hr style="margin-bottom:0px;"/><hr style="margin-top:0px;"/>
					<c:if test="${not empty alterpicmessage }">
						<div class="alert alert-success">
			              <button type="button" class="close" data-dismiss="alert">×</button>
			              <strong>Well done!</strong> ${alterpicmessage }
			            </div>
			            <%
			            	request.getSession().removeAttribute("alterpicmessage");
			            %>
					</c:if>
					<c:choose>
						<c:when test="${empty requestScope.picpath }">
							<form action="alterpic.jspx" method="post" enctype="multipart/form-data">
								上传图片： <input type="file" name="filename" placeholder=""><br/>
								<button type="submit" class="btn btn-primary">上传</button>
							</form>
						</c:when>
						<c:otherwise>
							 <img src="showimg.img?n=${picpath }" id="target" alt="Flowers" />
						    <form action="copepic.jspx?picpath=${picpath }" method="post">
						
						      <div>
						      <input type="hidden" size="4" id="x1" name="x1" />
						      <input type="hidden" size="4" id="y1" name="y1" />
						      <input type="hidden" size="4" id="x2" name="x2" />
						      <input type="hidden" size="4" id="y2" name="y2" />
						      <button type="submit" class="btn btn-primary">裁剪</button>
						      </div>
						    </form>
						</c:otherwise>
					</c:choose>
					
					
					
					
				</div>
				  		
				 

				<div class="clear"></div>
				<div class="foot_end">
					<!--下面的东西-->
				</div>
				
			</div>
			<div class="clear">
				
			</div>
		</div>
		<!--意见反馈-->
	<%@ include file="include/idea.jsp" %>
	</div>
	<!--end-->
	<!-- 最后的脚本 -->
	<%@include file="include/footcenter.jsp" %>
	<script src="../js/jquery.js" type="text/javascript"></script>
	<script src="../js/bootstrap.min.js" type="text/javascript"></script>
	<script src="../js/jquery.Jcrop.js" type="text/javascript"></script>
	<script type="text/javascript">

    jQuery(function($){

      $('#target').Jcrop({
        onChange:   showCoords,
        onSelect:   showCoords,
        onRelease:  clearCoords,
		//maxSize:[200,200],
		//minSize:[100,100],
        aspectRatio:1
      });

    });

    // Simple event handler, called from onChange and onSelect
    // event handlers, as per the Jcrop invocation above
    function showCoords(c)
    {
      $('#x1').val(c.x);
      $('#y1').val(c.y);
      $('#x2').val(c.x2);
      $('#y2').val(c.y2);
      $('#w').val(c.w);
      $('#h').val(c.h);
    };

    function clearCoords()
    {
      $('#coords input').val('');
    };

    </script>
</body>
</html>







